import './style.css'
import { Tabs } from 'antd-mobile'
import { connect } from 'react-redux'
// dispatch 类型
import { Dispatch } from 'redux'

// 获取redux中的所有参数类型
import { RootStore } from '../../store'

interface propsType {
    tabType?: string,
    dispatch?: Dispatch
}


const Header = (props: propsType) => {
    const tabsList = ['web前端', '前端开发', 'h5开发']

    const { dispatch,  tabType} = props

    // 切换tab的回调
    const changeTabs = (key: string) => {
        dispatch && dispatch({type: 'CHGANGE_TAB_TYPE', data: key})
        console.log(key)
    }
    return <div className="header-box">
        <div className="header-left">
            <Tabs onChange={(key: string) => changeTabs(key)} activeKey={tabType}>
                {
                    tabsList.map((item: string, idx: number) => {
                        return <Tabs.Tab title={item} key={idx} />
                    })
                }
            </Tabs>
        </div>
        <div className="header-right">
            搜索
        </div>

    </div>
}

const mapStateToProps = (state: RootStore) => {
    return state.commonReducer
}

export default connect(mapStateToProps)(Header)